<div class="issue-query container-fluid">
  <div>
    <div class="list-toolbar col-xl-12">
      <div class="title">
        <span>问题查询</span>
      </div>

      <div class="filter">
        <tql [rule]="rule" [filters]="filters"
             (conditionChangeEvent)="conditionChange($event)" (searchEvent)="search($event)"
             (favoritesEvent)="showModal()"></tql>
      </div>

      <div class="buttons">
        <span (click)="changeLayout('table')">
          <i [class.active]="layout=='table'" class="fa fa-list layout"></i>
        </span>
        <span (click)="changeLayout('browse')">
          <i [class.active]="layout=='browse'" class="fa fa-columns layout"></i>
        </span>

        <button (click)="create()" type="button" class="btn btn-primary btn-with-icon btn-sm">
          <i class="fa fa-plus-circle"></i>新建
        </button>
      </div>
    </div>
  </div>

  <div *ngIf="layout=='table'">
    <div class="row table">
      <div class="list-toolbar col-xl-12">
        <div class="title">
          <page-info [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize"></page-info>
        </div>

        <div class="filter">
        </div>

        <div class="buttons row table-column-selection-wrap">
          <span *ngIf="!batchModel" class="row">
            <!--<span *ngIf="priv['issue:maintain']" (click)="changeModel()" class="link">普通模式：</span>-->
            <!--<span *ngIf="!priv['issue:maintain']">普通模式：</span>-->
            <table-column-selection (selected)="changeColumns()" [columns]="columns"></table-column-selection>
          </span>
          <!--<span *ngIf="batchModel" class="row">
            <span (click)="changeModel()" class="link">批量模式：</span>
            <span (click)="selectAll()" class="link">全选</span>&nbsp;
            <span (click)="selectNone()" class="link">全不选</span>
            <span><issue-opt (dealWithIssueEvent)="dealWithIssue($event)"></issue-opt></span>
          </span>-->
        </div>
      </div>
    </div>

    <issue-table [issues]="models" [columns]="columns"
                 [orderBy]="orderBy" [batchModel]="batchModel"
                 (orderEvent)="reOrder($event)" (columnOrderEvent)="columnReOrder()"
                 (dealWithIssueEvent)="dealWithIssue($event)"></issue-table>

    <div class="page-container row">
      <ngb-pagination [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize"
                      (pageChange)="pageChange($event)">
      </ngb-pagination>
      <div class="page-size-wapper row">
        <span class="text">每页记录数</span> &nbsp;
        <select [(ngModel)]="pageSize" (change)="pageChange()" name="pageSize" class="">
          <option *ngFor="let item of [20,50,100]" value="{{item}}">{{item}}</option>
        </select>
      </div>
    </div>
  </div>

  <div *ngIf="layout=='browse'">
    <issue-browse [issues]="models" (dealWithIssueEvent)="dealWithIssue($event)"></issue-browse>

    <div class="row">
      <div class="order-bar row">
        <div class="order-seq">
          排序
        </div>
        <div class="order-column">
          <select [(ngModel)]="orderColumn" (change)="changeOrderSeq()" name="orderColumn">
            <option value="id">编号</option>
            <option *ngFor="let item of columns" value="{{item.code}}">{{item.label}}</option>
          </select>
        </div>
        <div class="order-seq">
          <i (click)="changeOrderSeq('desc')" *ngIf="orderSeq == 'asc'" class="fa fa-long-arrow-up link"></i>
          <i (click)="changeOrderSeq('asc')" *ngIf="orderSeq == 'desc'" class="fa fa-long-arrow-down link"></i>
        </div>
      </div>

      <div class="page-container row">
        <ngb-pagination [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize"
                        (pageChange)="pageChange($event)">
        </ngb-pagination>
        <div class="page-size-wapper row">
          <span class="text">每页记录数</span> &nbsp;
          <select [(ngModel)]="pageSize" (change)="pageChange()" name="pageSize" class="">
            <option *ngFor="let item of [20,50,100]" value="{{item}}">{{item}}</option>
          </select>
        </div>
      </div>
    </div>
  </div>

</div>

<pop-dialog #modalWrapper (confirm)="addToFavorites()" [title]="'请输入查询名称'">
  <input type="text" class="form-control" name="queryName" [(ngModel)]="queryName">
</pop-dialog>

<pop-dialog #deleteModalWrapper (confirm)="delete()" [title]="'提示'">
  确认删除名为"{{issue?.title}}"的问题?
</pop-dialog>
